<template>
  <div>
    <Form ref="formInline" :model="searchData" inline :label-width="70">
      <FormItem label="姓名:">
        <Input type="text" v-model="searchData.nick" />
      </FormItem>
      <FormItem label="手机号:">
        <Input type="text" v-model="searchData.mobile" />
      </FormItem>

      <!-- <FormItem label="我的下级:">
        <Input type="text" v-model="searchData.next" placeholder="请输入手机号" />
      </FormItem>
      <FormItem label="我的团队:">
        <Input type="text" v-model="searchData.team" placeholder="请输入手机号" />
      </FormItem> -->
      <Button type="primary" @click="search()">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <!-- <Button type="warning" @click="sendCoupon()" style="margin-left: 10px;">批量发券</Button> -->
    </Form>
    <Table :columns="columns" :data="list" @on-sort-change="customSort" @on-select="rowSelect" @on-select-all="allSelect"
      @on-select-cancel="rowSelectCancel" :highlight-row="true" max-height="800" border stripe>
      <template slot-scope="{ row , index}" slot="makeSlot">
        <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
          <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;" @click="editUser(row)" />
        </Tooltip>
        <Tooltip content="删除" style="margin-left: 10px;" placement="top">
          <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;" @click.stop="del(row.id)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>

    <!-- 发放优惠券 -->
 <!--   <Modal v-model="selectCouponModal" title="选择优惠券" @on-ok="selectCouponModalOk">
      <Form :model="formItem" :label-width="80">
        <FormItem label="优惠券">
          <Select v-model="formItem.coupon_id" filterable>
            <Option v-for="item in couponList" :value="item.id" :key="item.id">名称：{{ item.coupon_name }} ,金额： {{
              item.amount }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal> -->

    <!-- 编辑 -->
    <Modal v-model="editUserModal" title="用户信息" @on-ok="editUserModalOk">
      <Form :model="formUserItem" :label-width="80">
        <!-- <FormItem label="新上级">
          <Input v-model="formUserItem.new_mobile" placeholder="请输入上级手机号"></Input>
          <Alert type="error">如果不需要调整关系 请留空</Alert>
        </FormItem> -->
        <FormItem label="新手机号">
          <Input v-model="formUserItem.mobile" placeholder="请输入新手机号"></Input>
          <Alert type="error">如果不需要修改手机号 请留空</Alert>
        </FormItem>
        <FormItem label="姓名">
          <Input v-model="formUserItem.nick" placeholder="请输入姓名"></Input>
          <Alert type="error">如果不需要修改姓名 请留空</Alert>
        </FormItem>
        <FormItem label="增加余额">
          <Input v-model="formUserItem.add_score" placeholder="请输入增加的金额" type="number"></Input>
          <Alert type="error">如果不需要增加 请留空</Alert>
        </FormItem>
        <FormItem label="减少余额">
          <Input v-model="formUserItem.less_score" placeholder="请输入减少的金额" type="number"></Input>
          <Alert type="error">如果不需要减少 请留空</Alert>
        </FormItem>
        <FormItem label="增加积分">
          <Input v-model="formUserItem.add_integral" placeholder="请输入增加的积分" type="number"></Input>
          <Alert type="error">如果不需要增加 请留空</Alert>
        </FormItem>
        <FormItem label="减少积分">
          <Input v-model="formUserItem.less_integral" placeholder="请输入减少的积分" type="number"></Input>
          <Alert type="error">如果不需要减少 请留空</Alert>
        </FormItem>
        <!-- <FormItem label="用户等级">
          <Select v-model="formUserItem.level_id" placeholder="请选择">
            <Option v-for="value in userLevelList" :value="value.id">{{ value.name }}</Option>
          </Select>
        </FormItem> -->
      </Form>
    </Modal>
  </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
export default {
  name: "userList",
  components: {
    Paginate,
  },
  data() {
    return {
      searchData: {
        sort: "",
        order_by: "",
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '昵称',
          align: 'center',
          key: 'nick',
          sortable: 'custom',
        },
        // {
        //   title: '头像',
        //   align: 'center',
        //   key: 'avatar',
        //   render: (h, param) => {
        //     return h("img", {
        //       attrs: {
        //         src: param.row.avatar
        //       },
        //       style: {
        //         width: '80px',
        //         height: '60px'
        //       }
        //     });
        //   }
        // },
        {
          title: '手机号',
          align: 'center',
          key: 'mobile',
          sortable: 'custom',
        },
        {
          title: '邀请码',
          align: 'center',
          key: 'invite_code',
          sortable: 'custom',
        },
        {
          title: '邀请人',
          align: 'center',
          key: 'inviter_name',
          sortable: 'custom',
        },
        {
          title: '注册时间',
          align: 'center',
          key: 'create_time',
          sortable: 'custom',
        },
        // {
        //   title: '级别',
        //   align: 'center',
        //   key: 'level_name',
        //   sortable: 'custom',
        // },
        {
          title: '余额',
          key: 'money',
          align: 'center',
          sortable: 'custom',
          sortable: 'custom',
        },
        {
          title: '积分',
          key: 'integral',
          align: 'center',
          sortable: 'custom',
          sortable: 'custom',
        },
        {
          title: '绿色积分',
          key: 'green_scores',
          align: 'center',
          sortable: 'custom',
          sortable: 'custom',
        },
        {
          title: '操作',
          align: 'center',
          slot: 'makeSlot',
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {
        coupon_id: 0
      },
      editUserModal: false,
      formUserItem: {
        id: 0,
        mobile: '',
        user_name: '',
        // new_mobile: '',
        add_score: "",
        less_score: ""
      },
      userLevelList: [],
      // 发券userID
      selectCouponModal: false,
      couponList: [],
      sendType: 0,
      sendCouponUidArr: [],
    }
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios('/admin/member/getList', params).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      console.log(111);

      this.searchData = {
          page: 1,
          limit: 10,
          order_by: "",
          sort: ""
      };

      // this.searchData.page = 1;
      // this.searchData.order_by = "";
      // this.searchData.sort = "";
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    editModalOk() {
      let params = {
        ...this.formItem,
      };
      this.$axios('/admin/member/moveUser', params).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    getUserLevelArr() {
      this.$axios('/admin/member/getUserLevelArr').then(res => {
        this.userLevelList = res;
      });
    },
    edit(row) {
      this.formItem.id = row.id;
      console.log(row.id);
      this.editModal = true;
    },
    editUser(row) {
      console.log(row.id);
      //this.formUserItem = row;
      this.formUserItem.id = row.id;
      this.formUserItem.user_name = '';
      this.formUserItem.nick = '';
      this.formUserItem.mobile = '';
      this.formUserItem.add_score = '';
      this.formUserItem.less_score = '';
      this.formUserItem.add_integral = '';
      this.formUserItem.less_integral = '';

      // this.formUserItem.level_id = row.level_id;
      //this.getUserLevelArr();
      this.editUserModal = true;
    },
    editUserModalOk() {
      let params = {
        ...this.formUserItem,
      };
      this.$axios('/admin/member/editUser', params).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    del(id) {
      this.$axios('/admin/member/delUser', { id: id }).then(res => {
        this.$Message.success('执行成功');
        this.getList();
      });
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    rowSelect(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach(element => {
        this.sendCouponUidArr.push(element.id)
      });
      console.log(this.sendCouponUidArr);
    },
    rowSelectCancel(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach(element => {
        this.sendCouponUidArr.push(element.id)
      });
      console.log(this.sendCouponUidArr);
    },
    allSelect() {
      this.sendType = 1;
    },
    sendCoupon() {
      if (this.sendType == 0 && this.sendCouponUidArr.length == 0) {
        this.$Message.error('请选择要发放的用户');
        return;
      }
      this.getCouponList();
      this.selectCouponModal = true;
    },
    getCouponList() {
      this.$axios('/admin/member/getCouponList').then(res => {
        this.couponList = res;
      });
    },
    selectCouponModalOk() {
      this.$axios('/admin/member/sendCoupon', { send_type: this.sendType, user_ids: this.sendCouponUidArr, coupon_id: this.formItem.coupon_id }).then(res => {
        this.$Message.success('发放成功');
        this.getList();
      });
    },
  },
  created() {
    this.getList();
  }
}
</script>
<style></style>
